<template>
  <div class="Span" ref="Span"></div>
  <div class="DomHeight" ref="DomHeight" v-html="props.data"></div>
  <div class="omission omission1" ref="omission" v-if="isExpansion" :style="{ '-webkit-line-clamp': props.row }">
    <div
      class="omissionText"
      v-html="props.data"
      :class="{ 'omissionText-active': isBtn && props.backgroundColor1 !== 'rgba(0,0,0,1)' }"
      :style="{
        backgroundImage:
          isBtn && props.backgroundColor1 !== 'rgba(0,0,0,1)'
            ? `-webkit-linear-gradient( ${props.backgroundColor2} 50%, ${props.backgroundColor1} 100%)`
            : ``,
      }"
    ></div>
  </div>
  <div v-if="isBtn && isExpansion" class="openText" :style="{ color: props.btnColor }">
    <span @click="isExpansion = false" :style="{ color: props.btnColor }">展开阅读全文</span>
    <!-- <span><t-icon name="xiangxiazhankai" /></span> -->
    <div class="down">
      <i class="doorIcon" :style="{ color: props.btnColor }">&#xe637;</i>
      <!-- <img src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/template/tempalte13/down.png" alt="" /> -->
    </div>
  </div>
  <div class="warp" v-if="!isExpansion">
    <div class="expansion">
      <div class="text" ref="Text" v-html="getTextHTML(props.data)"></div>
    </div>
  </div>
  <div v-if="isBtn && !isExpansion" :style="{ color: props.btnColor }" class="PackUp">
    <span @click="UpCallback" :style="{ color: props.btnColor }">收起</span><span><t-icon name="chevron-up" /></span>
  </div>
</template>

<script lang="ts">
import { useProjectStore } from '@/store';
import { computed, defineComponent, ref, onMounted, watch } from 'vue';
import { getTextHTML, marginBtm } from '@/pages/templatePage/templateitem6/utils/textHtml';
export default defineComponent({
  name: 'TextMax',
});
</script>
<script lang="ts" setup>
const Span = ref();
const store = useProjectStore();
const isExpansion = ref(true);
const Text = ref();
const DomHeight = ref();
const omission = ref();
const isBtn = ref(false);
const props = defineProps({
  data: {
    type: String, //文本内容
    default: '',
  },
  btnColor: {
    type: String, // 按钮颜色v
    default: '#000000',
  },
  row: {
    type: Number, // 展示行数
    default: 3,
  },
  backgroundColor1: {
    type: String, // 文本渐隐背景色
    default: 'rgba(0,0,0,1)',
  },
  backgroundColor2: {
    type: String, // 文本渐隐背景色
    default: 'rgba(0,0,0,1)',
  },
});
console.log(props.backgroundColor1, props.backgroundColor2);

const emit = defineEmits(['Top']);
watch(
  () => isExpansion.value,
  () => {
    if (isExpansion.value) return;
  },
);
watch(
  () => props.data,
  () => {
    isExpansion.value = true;
  },
);
const UpCallback = () => {
  isExpansion.value = true;
  // Span.value.scrollIntoView();
  try {
    emit('Top');
  } catch {
    console.log('未传置顶事件');
  }
};
onMounted(() => {
  //判断虚拟文本dom是否高于容器dom

  setTimeout(() => {
    DomHeight.value.style.display = 'block';
    console.log(DomHeight.value.offsetHeight, omission.value.offsetHeight);

    if (DomHeight.value.offsetHeight > omission.value.offsetHeight) {
      isBtn.value = true;
    } else {
      isBtn.value = false;
    }
    console.log(isBtn.value);

    DomHeight.value.style.display = 'none';
  }, 1000);
  //   获取完高度后关闭虚拟dom

  // 监听内容动态切换，重新判断高度
});

watch(
  () => props.data,
  () => {
    DomHeight.value.style.display = 'block';
    setTimeout(() => {
      //判断虚拟文本dom是否高于容器dom
      if (DomHeight.value.offsetHeight > omission.value.offsetHeight) {
        isBtn.value = true;
      } else {
        isBtn.value = false;
      }
      console.log(isBtn.value);
      DomHeight.value.style.display = 'none';
    }, 0);
  },
);
</script>

<style lang="less" scoped>
::v-deep p {
  font-family: none;
}
.PackUp {
  display: flex;
  justify-content: center;
  text-indent: 0em !important;
  font-size: 16px;
  :deep(.t-icon) {
    transform: translateY(-2px);
  }
  span {
    font-family: 'SourceMedium' !important ;
  }
}
.openText {
  font-size: 16px;
  text-align: center;
  width: 100%;
  display: flex;
  text-indent: 0em !important;
  line-height: 28px;
  align-items: center;
  font-family: 'SourceMedium' !important ;
  position: relative;
  z-index: 1111;
  // margin-bottom: 70px;
  align-items: center;
  text-align: center;
  justify-content: center;
  span {
    font-family: 'SourceMedium' !important ;
    color: #2f869e;
    line-height: 24px;
    text-align: left;
  }
}

.down {
  display: flex;
  width: 20px;
  height: 20px;
  margin: -2px 0px 5px 6px;
  .doorIcon {
    font-size: 20px;
  }
  // img {
  //   width: 100%;
  //   height: 100%;
  // }
}
.DomHeight {
  position: absolute;
  opacity: 0;
}
.omissionText {
  word-wrap: break-word;
  font-family: 'none' !important;
  -webkit-background-clip: text;
  // font-family: 'PingFang SC' !important;
  // font-weight: 400;
  // :deep(p) {
  //   font-family: 'PingFang SC' !important;
  // }
  // font-weight: normal !important;
  // color: red !important;
}
.omissionText-active {
  -webkit-text-fill-color: transparent;
}
.warp {
  display: flex;
  text-align: justify;
}
.omission {
  text-indent: 2em;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  text-align: justify;
}

.text {
  text-indent: 2em;
  :deep(p) {
    text-indent: 2em;
    margin-bottom: 12px;
  }
}

.btn {
  display: flex;
  align-items: center;
  float: right;
  clear: both;
  text-align: start;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-family: '' !important;
  cursor: pointer;
  height: 30px;
  line-height: 30px;

  //   margin-top: calc(100% - 48px);
  //   font-size: 16px;
  font-size: 100%;
}

// .omission:before {
//   content: ' ';
//   float: right;
//   height: 113px;
// }

.expansion {
  width: 100%;
  word-wrap: break-word;
  :deep(p) {
    // font-family: 'SourceHanSerifCN';
    font-size: 100%;
  }
}

// .expansion:before {
//   content: '';
//   float: right;
//   height: calc(100% - 48px);
// }
</style>
